<template>
  <div class="novato">
    <ul class="task">
      <li>
        <span>{{ $t("language.task.task") }}</span>
        <span>{{ $t("language.task.win") }}</span>
      </li>
      <li>{{ $t("language.task.total") }} 0</li>
    </ul>
    <dl>
      <dd>
        <div>
          <NuxtImg src="/img/task1.png" alt="" /><span>{{
            $t("language.task.money")
          }}</span>
        </div>
        <strong>1000</strong>
      </dd>
      <dd>
        <div>
          <NuxtImg src="/img/task1.png" alt="" /><span>{{
            $t("language.task.money")
          }}</span>
        </div>
        <strong>2000</strong>
      </dd>
      <dd>
        <div>
          <NuxtImg src="/img/task1.png" alt="" /><span>{{
            $t("language.task.money")
          }}</span>
        </div>
        <strong>3000</strong>
      </dd>
      <dd>
        <div>
          <NuxtImg src="/img/task1.png" alt="" /><span>{{
            $t("language.task.money")
          }}</span>
        </div>
        <strong>5000</strong>
      </dd>
      <dd>
        <div>
          <NuxtImg src="/img/task1.png" alt="" /><span>{{
            $t("language.task.money")
          }}</span>
        </div>
        <strong>10000</strong>
      </dd>
    </dl>
    <div class="day">
      <ul>
        <li
          v-for="item in 5"
          :key="item"
          @click="chooseDate('day' + (item + 1), item)"
        >
          <span :class="activeindex == item ? 'active' : ''"
            >Day{{ item + 1 }}</span
          >
        </li>
      </ul>
      <div class="scroll">
        <dl>
          <dd v-for="item in list">
            <NuxtImg src='/img/task1.png' alt="" />
            <div>
              <p>{{ $t(item.text) }}</p>
              <div>
                <i>0</i>
                <i>/</i>
                <i>100</i>
              </div>
              <span
                >{{ $t("language.task.price") }}:{{ $t("language.task.money")
                }}{{ item.money }}</span
              >
              <span>{{ $t("language.task.total") }}:{{ item.jf }}</span>
            </div>
            <span @click="$openPage('/home')">{{
              $t("language.task.complete")
            }}</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, reactive } from "vue";
let activeindex = shallowRef<number>(0);
let mainlist = reactive<{
  date: string,
  text: string,
  money: string,
  jf: string,
}[]>([
  {
    date: "day1",
    text: "language.task.day1task1",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day1",
    text: "language.task.day1task2",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day1",
    text: "language.task.day1task3",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day1",
    text: "language.task.day1task4",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day2",
    text: "language.task.day2task1",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day2",
    text: "language.task.day2task2",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day2",
    text: "language.task.day2task3",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day2",
    text: "language.task.day2task4",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day3",
    text: "language.task.day3task1",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day3",
    text: "language.task.day3task2",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day3",
    text: "language.task.day3task3",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day3",
    text: "language.task.day3task4",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day4",
    text: "language.task.day4task1",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day4",
    text: "language.task.day4task2",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day4",
    text: "language.task.day4task3",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day4",
    text: "language.task.day4task4",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day5",
    text: "language.task.day5task1",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day5",
    text: "language.task.day5task2",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day5",
    text: "language.task.day5task3",
    money: "10.00",
    jf: "1000",
  },
  {
    date: "day5",
    text: "language.task.day5task4",
    money: "10.00",
    jf: "1000",
  },
]);
let dayt = shallowRef("day1");
let list = reactive<any[]>([]);
let chooseDate = (day: string, index:number) => {
  activeindex.value = index;
  dayt.value = day;
  list = mainlist.filter((i) => i.date == dayt.value);
};
chooseDate(dayt.value, 0);
</script>

<style scoped lang="scss">
.novato {
  width: 100%;
  padding: 0 10px;
  .task {
    @include flex(row, space-between, center);
    li:nth-child(1) {
      @include flex(column, flex-start, center);
      span {
        color: #95979e;
        font-size: 16px;

        display: block;
      }
    }
    li:nth-child(2) {
      padding: 10px 10px;
      border-radius: 10px;
      font-size: 16px;
      color: #fff;
      background-color: #3c404a;
    }
  }
  > dl {
    @include flex(row, space-between, center);
    margin-top: 10px;
    dd {
      @include flex(column, flex-start, center);
      flex: 1;

      div {
        background-color: #141717;
        border-radius: 10px;

        @include flex(column, flex-start, center);
        width: 100%;
        img {
          width: 45px;
          margin: 8px 0;
        }
        span {
          display: block;
          width: 100%;
          background-color: #858995;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          text-align: center;
          color: #d2d3d8;
          font-size: 14px;
        }
      }
      strong {
        font-weight: normal;
        display: block;
        margin-top: 5px;
        color: #fff;
        font-size: 16px;
      }
    }
    dd + dd {
      margin-left: 5px;
    }
  }
  .day {
    width: 100%;
    border: solid 1px #4a4c53;
    padding: 10px 15px;
    border-radius: 15px;
    margin-top: 10px;

    ul {
      @include flex(row, space-between, center);
      height: 37px;
      li {
        flex: 1;
        text-align: center;
        padding: 8px 0;
        span {
          color: #666;
          font-size: 14px;
          padding-bottom: 8px;
        }
        .active {
          color: #fff;
          font-size: 14px;
          border-bottom: 1px solid #fff;
        }
      }
      li + li {
        border-left: 1px solid #666;
      }
    }
    .scroll {
      width: 100%;
      margin-top: 15px;
      overflow: scroll;
      height: 420px;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      dl {
        @include flex(column, center, center);
        
        dd {
          width: 100%;
          border-radius: 10px;
          padding: 10px;
          margin-bottom: 10px;
          background-color: rgb(36, 38, 43);
          @include flex(row, center, center);
          border: solid 1px #4a4c53;
          div {
            flex: 1;
          }
          img {
            width: 30px;
            margin-right: 10px;
          }
          > div {
            margin-right: 10px;
            @include flex(column, center, flex-start);
            p {
              font-size: 14px;
              color: #95979e;
              line-height: 20px;
            }
            div {
              width: 100%;
              height: 20px;
              background-color: rgb(60, 64, 74);
              border-radius: 10px;
              @include flex(row, center, center);
              i {
                font-style: normal;
                color: #fff;
                font-size: 14px;
              }
            }
            span {
              color: #fff;
              font-size: 14px;
            }
          }
          > span {
            font-size: 12px;
            color: #0a906c;
            display: block;
            height: 26px;
            min-width: 60px;
            @include flex(row, center, center);
            border-radius: 10px;
            border: 1px solid #0a906c;
            padding: 0 5px;
          }
        }
      }
    }
  }
}
</style>
